<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2021/4/23
  Time: 15:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户信息添加</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="static/plugins/Hplus-v.4.1.0/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="static/plugins/Hplus-v.4.1.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="static/plugins/Hplus-v.4.1.0/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="static/plugins/Hplus-v.4.1.0/css/animate.css" rel="stylesheet">
    <link href="static/plugins/Hplus-v.4.1.0/css/style.css?v=4.1.0" rel="stylesheet">

    <!-- 全局js -->
    <script src="static/plugins/Hplus-v.4.1.0/js/jquery.min.js?v=2.1.4"></script>
    <script src="static/plugins/Hplus-v.4.1.0/js/bootstrap.min.js?v=3.3.6"></script>
    <script type="text/javascript">
        // 客户端浏览器验证
        // 进行ajax用户信息查询
        function doQuery() {
            // jquery实现ajax的操作
            $.ajax({
                type: "POST", // 请求方式
                url: "queryByParams", // 请求的服务器路径
                data: $("#queryform").serialize(), // post请求的数据参数
                datatype: "Json", // 服务器响应的内容类型
                success: function (data) { // ajax请求成功时的回调函数
                    // data 是json对象，而不是json字符串，所有data可以像数据集合一样进行遍历
                    // 解析data，进行数据显示
                    // 这里是进行ajax业务逻辑处理的地方
                    // 执行ajax引擎的回调处理，这里是用来进行业务逻辑处理的【类似 thread 类的 run 方法； 类似于 servlet的service方法】
                    // console.log("ajax查询的数据集：")
                    // console.log(data);

                    // 体现了dom的局部更新，也是ajax优势

                    // 遍历 data json对象
                    if (data) {
                        // 显示的数据内容
                        var strShowData = "";
                        // 开始进行遍历data  json对象
                        $.each(data, function (i, eachRow) {
                            strShowData += "<tr>"
                            strShowData += "<th scope='row'>" + (i + 1) + "</th>"
                            strShowData += "<td>" + eachRow.username + "</td>"
                            strShowData += "<td>" + eachRow.useraddress + "</td>"
                            strShowData += "<td>" + eachRow.usertel + "</td>"
                            strShowData += "<td>" + eachRow.userregdate + "</td>"
                            strShowData += "<td><img src='" + eachRow.userimg + "'style='width: 30px;height: 30px'/></td>"
                            strShowData += '<td><a class="btn btn-default" href="modifyJump?id=eachRow.userId" role="button">修改</a></td>'
                            strShowData += '<td><a class="btn btn-default" href="deleteJump?id=eachRow.userId" onclick="return confirm(\'请确认是否删除该记录？\')" role="button">删除</a></td>'
                            strShowData += "</tr>"
                        });

                        // 将要显示的内容写到控件中
                        $("#showData").html(strShowData);
                    }


                },
                error: function () {
                    // ajax请求发生非错误时的回调函数
                    alert("查询信息失败!")
                }
            });

        }
    </script>
</head>
<body>
<div class="ibox-content">
    <form class="form-horizontal" id="queryform">
        <div class="form-group">
            <label class="col-sm-2 control-label">用户名</label>

            <div class="col-sm-2">
                <input type="text" id="userName" name="username" class="form-control">
                <span class="help-block m-b-none" id="user-name-label" style="color: red"></span>
            </div>

            <label class="col-sm-2 control-label">住址</label>

            <div class="col-sm-2">
                <input type="text" id="useraddress" name="useraddress" class="form-control">
                <span class="help-block m-b-none" id="user-address-label" style="color: red"></span>
            </div>

        </div>

        <div class="hr-line-dashed"></div>

        <div class="form-group">
            <label class="col-sm-2 control-label">联系电话</label>

            <div class="col-sm-2">
                <input type="text" id="userTel" name="usertel" class="form-control">
                <span class="help-block m-b-none" id="user-tel-label" style="color: red"></span>
            </div>

            <label class="col-sm-2 control-label">注册日期</label>
            <div class="col-sm-5">
                <div class="col-sm-5">
                    <input type="date" id="userRegisteDate" name="userregdate" placeholder="选择开始日期"
                           class="form-control">
                </div>
                <div class="col-sm-1">
                    -
                </div>
                <div class="col-sm-5">
                    <input type="date" id="userRegisteDate2" name="userregdate2" placeholder="选择截止日期"
                           class="form-control" style="float:none;">
                </div>
            </div>

        </div>
        <div class="hr-line-dashed"></div>
        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-2">
                <button class="btn btn-primary" type="button" onclick="doQuery()">查询</button>
            </div>
            <div class="col-sm-2 col-sm-offset-2">
                <button  class="btn btn-primary" type="button">新增</button>
            </div>
        </div>
    </form>


    <div class="bs-example" data-example-id="hoverable-table">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>住址</th>
                <th>联系电话</th>
                <th>注册日期</th>
                <th>头像</th>
                <th>修改</th>
                <th>删除</th>
            </tr>
            </thead>
            <tbody id="showData">


            </tbody>
        </table>
    </div>
</div>

</body>
</html>
